<template>
    <div class='fxn-body'>
        <Searchs v-model:searchData="searchData" v-model:SearchForm="SearchForm" @handleSearch="handleSearch"></Searchs>
        <!-- Search End -->
        <div class="fxn-section fixed fxn-margin-t-20">
            <el-table v-loading="loading" :data="listData">
                <el-table-column label="案件名称" prop="lawcase_title">
                    <template #default="scope">
                        <el-link type="primary" :underline="false" @click="handlePath(scope.row)">{{scope.row.lawcase_title}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="应收款名称" prop="title" />
                <el-table-column label="款项类型" prop="type">
                    <template #default="scope">
                        {{$filter.formatData(scope.row.type, 'payment_type')}}
                    </template>
                </el-table-column>
                <el-table-column label="应收金额" prop="money" />
                <el-table-column label="预计收款时间" prop="coll_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.coll_time)}}
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" />
                <el-table-column label="已收款金额" prop="coll_money" />
                <el-table-column label="未收款金额" prop="last_money" />
                <el-table-column label="到账状态" prop="coll_status">
                    <template #default="scope">
                        <span :style="{color: $filter.collStatusColor(scope.row.coll_status)}">{{$filter.collStatus(scope.row.coll_status)}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="开票状态" prop="invoice_status">
                    <template #default="scope">
                        {{$filter.invoiceStatus(scope.row.invoice_status)}}
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" width="190">
                    <template #default="scope">
                        <el-link v-if="authMenu('sys_finance_receivable_edit')" type="primary" :underline="false" @click="handleOp(scope.row)">修改</el-link>
                        <el-link v-if="authMenu('sys_finance_receivable_add')" type="primary" :underline="false" @click="handleAdd(scope.row)">添加收款</el-link>
                        <el-link v-if="authMenu('sys_finance_receivable_invoice')" type="primary" :underline="false" @click="handleInv(scope.row)">申请开票</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- Section End -->

        <div class="fxn-page fixed">
            <el-pagination v-model:current-page="page" v-model:page-size="perPage" :page-sizes="[10, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next" :total="count" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- Page End -->

        <!-- 修改 -->
        <dialogForm ref="dialogEdit" :formData="formData" @handleDialog="handleEditSubmit"></dialogForm>
        <!-- 修改 End -->

        <!-- 添加收款 -->
        <Collection v-model:opDialog="opDialog" :opData="opData" @handleSubmit="handleSubmit"></Collection>
        <!-- 添加收款 End -->

        <!-- 申请开票 -->
        <Invoicing v-model:invDialog="invDialog" :invData="invData" @handleSubmit="handleSubmit"></Invoicing>
        <!-- 申请开票 End -->
    </div>
</template>

<script>
    import Searchs from '../Common/Search.vue'
    import dialogForm from '../Common/Form.vue'
    import Invoicing from './Common/Invoicing.vue'
    import Collection from './Common/Collection.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {Searchs,dialogForm,Invoicing,Collection},
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 0,
                page: 0,
                perPage: 10,
                loading: false,
                btnLoading: false,
                listData: [],

                //搜索
                SearchForm: {
                    title: '',
                    type: '',
                    coll_status: '',
                    invoice_status: '',
                    create_time: '',
                },
                searchData: [
                    {label: '案件名称', prop: 'title', type: 'input'},
                    {label: '款项类型', prop: 'type', type: 'select', data: computed(() => store.state.configEnable.payment_type), selectlabel: 'value', selectvalue: 'name'},
                    {label: '到账状态', prop: 'coll_status', type: 'select', data: computed(() => store.state.coll_status), selectlabel: 'label', selectvalue: 'value'},
                    // {label: '开票状态', prop: 'invoice_status', type: 'select', data: computed(() => store.state.invoice_status), selectlabel: 'label', selectvalue: 'value'}, 
                    {label: '预计收款时间', prop: 'create_time', type: 'daterange'},                   
                ],

                //修改
                formData: {
                    inline: false,
                    width: '800',
                    title: '修改',
                    labelWidth: '120',
                    data: [
                        {formType: 'input', span: 12, label: '应收款名称', prop: 'title', rules: [{ required: true, message: '请输入应收款名称', trigger: 'blur' }], placeholder: '请输入应收款名称'},
                        {formType: 'select', span: 12, label: '款项类型', prop: 'type', data: computed(() => store.state.configEnable.payment_type), rules: [{ required: true, message: '请选择款项类型', trigger: 'blur' }], selectlabel: 'value', selectvalue: 'name', placeholder: '请选择'},
                        {formType: 'input', span: 12, label: '应收金额', prop: 'money', rules: [{ required: true, message: '请输入应收款名称', trigger: 'blur' }], placeholder: '请输入应收金额'},
                        {formType: 'datepicker', span: 12, label: '收款时间', prop: 'coll_time', type: 'date', format: 'YYYY-MM-DD', rules: [{ required: true, message: '请选择收款时间', trigger: 'blur' }], placeholder: '请选择'},
                        {formType: 'input', span: 24, type: 'textarea', rows: 5, label: '备注', prop: 'remark', placeholder: '请输入备注'},
                    ]
                },

                //添加收款
                opDialog: false,
                opData: {
                    type: 1,
                    title: '添加收款',
                },

                //申请开票
                invDialog: false,
                invData: {},
            })

            //列表
            const getList = (page,perPage) => {
                state.loading = true;
                proxy.$http.get('/oa/Lawcase/finances',{
                    page: page ? page : 1,
                    perPage: perPage ? perPage : 10,
                    title: state.SearchForm.title,
                    type: state.SearchForm.type,
                    coll_status: state.SearchForm.coll_status,
                    invoice_status: state.SearchForm.invoice_status,
                    create_time: String(state.SearchForm.create_time),
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.listData = data.list;
                    }
                })
            }

            //修改
            const handleOp = (row) => {
                proxy.$http.get('/oa/Lawcase/financeForm',{id: row.id})
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.formData = {
                            ...state.formData,
                            title: '修改',
                            model: {
                                id: data.id,
                                lawcase_id: data.lawcase_id,
                                title: data.title,
                                type: data.type,
                                money: data.money,
                                coll_time: proxy.$filter.dateTime(data.coll_time),
                                remark: data.remark,
                            }
                        }
                        proxy.$refs.dialogEdit.openDialog();
                    }
                })
            }

            //提交修改
            const handleEditSubmit = (e) => {
                proxy.$http.post('/oa/Lawcase/financeForm', e)
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('提交成功');
                        getList(state.page,state.perPage);
                    }
                })
            }

            //打开添加收款
            const handleAdd = (row) => {
                state.opData.finance_id = row.id;
                state.opData.lawcase_id = row.lawcase_id;
                state.opDialog = true;
            }

            //打开申请开票
            const handleInv = (row) => {
                state.invData.finance_id = row.id;
                state.invData.lawcase_id = row.lawcase_id;
                state.invDialog = true;
            }

            //提交添加收款/申请开票
            const handleSubmit = (e) => {
                getList(state.page,state.perPage);
            }

            //跳转详情
            const handlePath = (row) => {
                router.push({path: '/CaseDetail', query: {id: row.lawcase_id, type: row.case_type, pathUrl: '/ReceivableManage'}})
            }

            //搜索
            const handleSearch = (e) => {
                state.SearchForm = e;
                getList(1,10);
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                getList(state.page,state.perPage);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getList(state.page,state.perPage);
            }

            //获取权限
            const authMenu = (value) => {
                let currentRouter = router.currentRoute.value.path;
                let menuArr = (proxy.$public.authMenu(currentRouter).split(','));
                for (let index = 0; index < menuArr.length; index++) {
                    if(value == menuArr[index]){
                        return true
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                authMenu();
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                handleOp,
                handleEditSubmit,
                handleAdd,
                handleInv,
                handleSubmit,
                handlePath,
                
                //组件方法
                authMenu,
                handleSearch,
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    
</style>